Browsing and Editing Files with iOS Quick Look
Description
Browse and edit files with native apps on iOS with iOS Quick Look.
Discussion
The Alpha WkWebView Plugin supports the ability to view and edit a directory of local files on an iOS device using the native iOS Quick Look Preview Controller. The files in the directory are presented using a native iOS control that includes a table view list of the files. When a row is tapped, the Quick Look Preview Controller will open and display the respective document, media or image file.
The Quick Look Framework is used by many native iOS apps (Mail, Notes, etc.). It can open specific types of documents for previewing. Supported documents include iWork documents (Pages, Numbers, Keynote), Microsoft Office documents, PDFs, images, text files, rich-text format documents, CSV files, video files, audio files and USDZ files for viewing AR content. If the app is compiled with Xcode 11 and the device is running iOS 13 or greater, movies, PDFs and images may be edited. If the file is edited and saved, the local file is overwritten. Edited files can be shared.
The easiest ways to download files to the device is through the use of a manifest. Manifests can be built in Alpha Anywhere using the On-Device-Data Genie. Once the manifest is created, you can load a manifest and it's associated files programmatically. The device needs to be online to load the manifest and download the files. After the files are downloaded onto the device, however, all of files will be available offline.
The Alpha WkWebView plugin defines a custom protocol handler to expose the functionality of the iOS Quick Look Preview Controller. To view a directory of files, the source of an HTML image tag can be used to point to the local directory. Since the alpha-local:// custom protocol is used in the URL, it will be recognized and handled by the Alpha WkWebView plugin. The HTML image tag is a placeholder for displaying the directory, and image's source url is handled by the alpha-local:// protocol. The HTML image tag does not need to be visible.
To display a directory of files that may include any of the Quick Look supported formats, add the prefix:
alpha-local://viewdir?url=file:///pathToLocalFile/local/directory
Here's an example to the localFiles/project1 directory from a test app:
alpha-local://viewdir?url=file:///var/mobile/Containers/Data/Application/1920522B-3AA6-4BAE-8007-5B4E8AEACC14/Library/NoCloud//localFiles/project1/
For additional information see the plugin readme file: Cordova-plugin-alpha-wkebview-engine
Editing requires the Cordova App to be built with Xcode 11 and the iOS device must be running iOS 13 or greater.
Limitations
iOS 13, built using CLI with Xcode 11
See Also